<template>
	<view class="logo">
		<image src="../../static/home/cat.png"></image>
		<text>宠家</text>
	</view>
	<view class="container">
		<view class="title">欢迎来到宠家平台，登录立享更多功能</view>
		<view class="xieyi">微信授权登录 为您提供更好的服务</view>
		<view class="button-container">
			<button @click="login()" class="login">一键登录</button>
		</view>
		<view class="xieyi">
			<checkbox-group @change="changeRead">
				<checkbox style="transform:scale(0.8)" color="#f8e177" activeBorderColor="#f8e177" activeBackgroundColor="#f8e177" />
				我已阅读并同意<text @click="goXieyi('xieyi')" style="color:#f8e177 ;">《用户协议》</text>和<text @click="goXieyi('yinsi')" style="color:#f8e177 ;">《隐私政策》</text>
			</checkbox-group>
		</view>
	</view>
	<view @click="goHome()" style="position: absolute;bottom:150rpx" class="xieyi">暂不登录</view>
</template>

<script lang="ts" setup>
	import {ref,reactive} from "vue"
	import http from "@/utils/request.js"
	let isread=ref(false)
	console.log('登录页面')
	
	function goXieyi(e){
		uni.navigateTo({
			url:"/pages/xieyi/index?type="+e
		})
	}
	function goHome(){
		uni.reLaunch({
			url:"/pages/home/index"
		})
	}
	function changeRead(e){
		isread.value=!isread.value
	}
	function getLogin() {
		return new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success(res) {
					let response=http.post('/user/login',{code:res.code})
					response.then((result)=>{
						resolve(result)
					})
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	}
	function login(){
		if(!isread.value){
			return uni.showToast({
				title:'请勾选并同意《用户协议》和《隐私政策》',
				icon:'none'
			})
		}
		let loginres=getLogin()
		loginres.then((result)=>{
			console.log(result);
			const userinfo={
				user_id:result.data.data.user_id,
				open_id:result.data.data.open_id,
				avatur:result.data.data.avatur,
				nickname:result.data.data.nickname
			}
			let petres=http.get('/pet/getpets',{pet_order:userinfo.user_id})
			petres.then((res)=>{
				uni.setStorageSync('petlist',res.data.data)
				uni.setStorageSync('userinfo',userinfo)
				uni.showToast({
					title:'登录成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.reLaunch({
						url:"/pages/home/index"
					})
				},1000)
			})
		})
	}
</script>

<style lang="scss">
	.container{
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.logo{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top:120rpx;
		
		image{
			width: 150rpx;
			height: 150rpx;
			margin-bottom: 20rpx;
		}
		
		text{
			font-size: 32rpx;
		}
	}
	
	.title{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 60rpx;
	}
	.button-container{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.login{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70%;
			border-radius: 50rpx;
			margin: 10rpx 0;
		}
	}
	.xieyi{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		color:#666;
	}
</style>
